<template>
    <div class="movie-detail-container">
        <!-- 头部 start -->
        <Header :info="filmInfo"></Header>
        <!-- 头部 end -->
        <!-- filter start -->
        <Filter v-if="timeList.length > 0" :data="timeList" @onChanged="onTimeChanged"></Filter>
        <!-- filter end -->
        <!-- 搜索框 start -->
        <SearchInput @onSearch="searchValueFun" @onClear="clearValueFun"></SearchInput>
        <!-- 搜索框 end -->
        <!-- 区域筛选操作 start -->
        <SearchFilter @onRegionChanged="onRegionChanged" @onBrandChanged="onBrandChanged"></SearchFilter>
        <!-- 区域筛选操作 end -->
        <!-- list 列表 start -->
        <div class="list-container" :style="{ height: `${listContainerHeight}px` }">
            <template v-if="listContainerHeight && listContainerHeight > 0">
                <scroll-view :scroll-y="true" v-if="cinemaList.length" :style="{ height: `${listContainerHeight}px` }"
                    scrollAnchoring @scrolltolower="onScrollBottom">
                    <div class="list-item-container" v-for="(item, index) in cinemaList" :key="index">
                        <CinemaItem :info="item" @click="handleCinemaItem(item)"></CinemaItem>
                    </div>
                    <Loading :page="pageInfo.currentPage" :total="pageInfo.totalPage" :loadingFlag="loadingFlag"
                        :tipFlag="tipFlag"></Loading>
                </scroll-view>
            </template>
            <template v-if="cinemaList.length === 0 && !loading">
                <nut-empty description="无数据"></nut-empty>
            </template>
            <!-- 加载状态 -->
            <template v-if="cinemaList.length === 0 && loading">
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
                <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title
                    animated row="3">
                </nut-skeleton>
            </template>
        </div>
        <!-- list 列表 end -->
    </div>
</template>
 <!-- 鉴权 -->
<script lang="ts">
// import { needLocation } from "../../utils/needLocationHook";
// export default {
//     name: "Cinema",
//     mixins: [needLocation],
// };
</script>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import Header from "./header.vue";
import Filter from "./filter.vue";
import { useLocationStore } from '../../store';
import { ref, onMounted, watch, reactive } from 'vue'
import Taro  from '@tarojs/taro';
import SearchFilter from '../../component/cinema-search-filter'
import SearchInput from '../../component/cinema-search-input'
import Loading from '../../component/Loading/index'
import * as cinemaApi from '../../api/cinema'
import CinemaItem from '../index/component/item/index'
const timeList = ref([]) //时间数组
const cinemaList = ref([])//影院列表
const router = Taro.useRouter(); //路由
const loading = ref(false) //加载标志
const currentFilmId = ref(null) // 默认选中电影Id
const filmInfo = ref({}) //电影信息Object
const locationStore = useLocationStore(); //位置 store
const { getSelectCityinfo, getCitylatlng } = storeToRefs(locationStore);
//列表筛选 参数
const filterInfo = reactive({
    // areaId: null,
    cinemaLineId: null,
    cinemaName: null,
    areaId: getSelectCityinfo.value.id,
    filmId: null,
    showDate: "",
    cinemaLat: getCitylatlng.value[0],
    cinemaLng: getCitylatlng.value[1]



})
//电影信息
const MovieInfo = ref({
    areaCode: getSelectCityinfo.value.id,
    "filmId": ""
})
const timer = ref(null)  //加载定时器
const loadingFlag = ref(false) //加载组件
const tipFlag = ref(false); // "数据过多 提示文字一开始让他隐藏 当数据getData() 回来以后 在变成true 使用loading 组件 需要传递这个值"
// 获取列表 参数
const pageInfo = ref({
    totalPage: 0,
    currentPage: 1,
    pageSize: 10,
}) //影院参数
// 过滤器
const onRegionChanged = (value) => {
    if (value === 0) {
        filterInfo.areaId = getSelectCityinfo.value.id;
    } else {
        filterInfo.areaId = value;
    }
    getCinemaList(0)
};
//筛选 区 以及 影院品牌
const onBrandChanged = (value) => {
    filterInfo.cinemaLineId = value;
    pageInfo.value.currentPage = 1
    getCinemaList(0)
}
//获取电影的信息 和 日期数组
const getMovieData = async () => {
    const res: any = await cinemaApi.getMovieDateByid(MovieInfo.value)
    if (res.state == 200) {
        res.data.showDate.sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
        timeList.value = res.data.showDate.map((item, index) => ({
            id: index + 1,
            name: item,
        }));
        if (!timeList.value.length) {
            getCinemaList(0)
        }
        filmInfo.value = res.data.filmInfo
    }
}
//滑动处高度
const listContainerHeight = ref(0)
//获取高度
const getListContainerHeight = () => {
    const query = Taro.createSelectorQuery()
        .select(".list-container")
        .boundingClientRect()
    query.selectViewport()
    query.exec(function (res) {
        if (res[0]) {
            listContainerHeight.value = res[0].height;
        }
    });
}
//滚动分页处理函数 status 状态 1:分页 0:筛选
const onScrollBottom = () => {
    if (timer.value) {
        clearTimeout(timer.value);
    }
    timer.value = setTimeout(async () => {
        tipFlag.value = false
        if (pageInfo.value.currentPage < pageInfo.value.totalPage) {
            pageInfo.value.currentPage++;
            loadingFlag.value = true;
            await getCinemaList(1)
        } else {
            tipFlag.value = true
            loadingFlag.value = false;
        }
    }, 200);
};
//搜索自定义函数
const searchValueFun = (value) => {
    filterInfo.cinemaName = value
    pageInfo.value.currentPage = 1
    pageInfo.value.pageSize = 999
    getCinemaList(0)
}
//清空搜索框 自定义函数
const clearValueFun = () => {
    filterInfo.cinemaName = ""
    getCinemaList(0)
}
//页面模板渲染的时候
onMounted(() => {
    getListContainerHeight()
    const filmid = router.params.filmId
    MovieInfo.value.filmId = filmid
    getMovieData()
})
//日期改变 过滤数据
const onTimeChanged = (data) => {
    const { time } = data;
    filterInfo.showDate = time
    pageInfo.value.currentPage = 1
    pageInfo.value.pageSize = 10
    getCinemaList(0)
};
//格式化时间
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};
//跳转页面
const handleCinemaItem = (item) => {
    Taro.navigateTo({
        url: `/pages/cinema-detail/index?cinemaId=${item.id}&filmId=${filmInfo.value.id}&cinemaCode=${item.cinemaCode}`
    })
}
// 监听选择城市变化
watch(
    () => locationStore.selectCityinfo,
    () => {
        filterInfo.areaId = getSelectCityinfo.value.id
        pageInfo.value.currentPage = 1
        pageInfo.value.pageSize = 10
        filterInfo.cinemaLat = getCitylatlng.value[0],
            filterInfo.cinemaLng = getCitylatlng.value[1]
        getCinemaList(0)
    }
);
//获取影院列表数据
const getCinemaList = async (status) => {
    currentFilmId.value = router.params.filmId;
    filterInfo.filmId = router.params.filmId
    filterInfo.currentPage = pageInfo.value.currentPage
    filterInfo.pageSize = pageInfo.value.pageSize
    for (const key in filterInfo) {
        if (filterInfo[key] === 0 || filterInfo[key] === "" || filterInfo[key] === null) {
            delete filterInfo[key];
        }
    }
    const res: any = await cinemaApi.cinemaList(filterInfo)
    if (res.state == 200) {
        if (status) {
            if (res.data.cinemaListVo) {
                cinemaList.value = [...cinemaList.value, ...res.data.cinemaListVo.list]
                pageInfo.value.totalPage = res.data.cinemaListVo.pageCount
            } else {
                cinemaList.value = [...cinemaList.value]
            }
            loadingFlag.value = false;
        } else {
            if (res.data.cinemaListVo) {
                cinemaList.value = res.data.cinemaListVo.list
                pageInfo.value.totalPage = res.data.cinemaListVo.pageCount ? res.data.cinemaListVo.pageCount : 0
            } else {
                cinemaList.value = []
            }
            loadingFlag.value = false;
        }
    } else if (res.state == 202) {
        cinemaList.value = []
    }
}
</script>
<style lang="scss">
.movie-detail-container {

    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .list-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 25px;
    }

    .list-item-container {
        // background-color: #fff;

        background-color: #fff;
        margin-top: 15px;
    }

    .list-item-container:nth-child(n+2) {
        margin-top: 15px;
    }

    .list-item-container:last-child {
        margin-bottom: 20px;
    }


}
</style>
